<template>
  <div class="p-sm">
    <n-card title="个人中心" class="bg-white">
      <n-tabs type="line" animated>
        <n-tab-pane name="userInfo" tab="用户信息" class="h-full">
          <user-info></user-info>
        </n-tab-pane>
        <n-tab-pane name="changePw" tab="修改密码">
          <change-pw></change-pw>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>

</template>

<script  setup lang='ts' >
// import{ref} from "vue"
import  userInfo from './components/userInfo.vue'
import  changePw from './components/changePw.vue'


</script>

<style lang="scss" scoped>
.n-tabs{
  display: flex;
  flex-direction: column;
  height: 100%;
  :deep(.n-tabs-pane-wrapper){
    flex: 1;
  }
}
</style>
